<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/house/static/layui/css/layui.css" />
  <link rel="stylesheet" href="layuiadmin/layui/css/layui.css"/>
  <title>房屋租赁网</title>
  <link rel="stylesheet" href="static/css/global.css">
  <script src="layuiadmin/layui/layui.js"></script>
</head>
<body>
<div class="layui-carousel" id="bg-item">
  <div class="layui-header title">
    <div class="layui-container">
      <div class="layui-logo layui-pull-left">
        <img src="static/img/logo.png" width="240px">
      </div>
      <div class="operation layui-pull-right"><i class="layui-icon layui-icon-tree"></i> 登录 - 注册</div>
    </div>
  </div>
  <!--搜索框-->
  <div class="layui-container">
    <div class="seach-input">
      <form class="seach-form layui-form" method="post" action="#">
        <div class="layui-pull-left input">
          <input type="text" placeholder="请输入房源特征、房型、小区名..." name="keywords" class="seach layui-input" lay-verify="">
        </div>
        <div class="layui-pull-left button">
          <button class="btn seach-btn" lay-submit><i class="layui-icon layui-icon-search" style="font-size: 24px;"></i></button>
        </div>
      </form>
    </div>
  </div>
  <div carousel-item>
    <div style="background: url('static/img/banner1.jpg') no-repeat center/cover"></div>
    <div style="background: url('static/img/banner2.jpg') no-repeat center/cover"></div>
    <div style="background: url('static/img/banner3.jpg') no-repeat center/cover"></div>
    <div style="background: url('static/img/banner4.jpg') no-repeat center/cover"></div>

  </div>
</div>

<div class="layui-container">
  <div class="layui-tab layui-tab-brief" id="sign" lay-filter="" style="display: none;">
    <ul class="layui-tab-title">
      <li class="layui-this">登录</li>
      <li>注册</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">
        <div class="" style="margin: 40px 20px;">
          <form class="layui-form layui-form-pane" id="login">
            <div class="layui-form-item">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-block">
                <input type="text" name="username1" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
              </div>
            </div>
            <br>
            <div class="layui-form-item">
              <label class="layui-form-label">密码</label>
              <div class="layui-input-block">
                <input type="password" name="password1" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">登录身份</label>
              <div class="layui-input-inline">
                <select name="role" lay-filter="role">
                  <option value="">登录身份</option>
                  <option value="1">管理员</option>
                  <option value="2">用户</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-row">
                <div class="layui-col-xs7">
                  <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-vercode"></i>
                    </div>
                    <input
                            type="text"
                            name="captcha"
                            value=""
                            lay-verify="required"
                            placeholder="验证码"
                            lay-reqtext="请填写验证码"
                            autocomplete="off"
                            class="layui-input"
                            lay-affix="clear"
                    />
                  </div>
                </div>
                <div class="layui-col-xs5">
                  <div style="margin-left: 10px">
                    <img
                            src="/house/captcha"
                            onclick="this.src='/house/captcha?t='+ new Date().getTime();"
                    />
                  </div>
                </div>
              </div>
            </div>
            <br>
            <div class="layui-form-item">
              <button class="layui-btn layui-btn-fluid layui-btn-normal layui-btn-radius" lay-submit lay-filter="login">立即登录</button>
            </div>
          </form>
        </div>
      </div>
      <div class="layui-tab-item">
        <div class="" style="margin: 30px 20px;">
          <form class="layui-form layui-form-pane form">
            <div class="layui-form-item">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-block">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">密码</label>
              <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">姓名</label>
              <div class="layui-input-block">
                <input type="text" name="nickname" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">性别</label>
              <div class="layui-input-inline">
                <select name="sex" lay-filter="sex" required lay-verify="required">
                  <option value="">性别</option>
                  <option value="女">女</option>
                  <option value="男">男</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">手机号</label>
              <div class="layui-input-block">
                <input type="text" name="phone" required lay-verify="required" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
              </div>
            </div>
          </form>
          <div class="layui-form-item">
            <input type="submit" class="layui-btn layui-btn-fluid layui-btn-radius layui-btn-normal regist-btn" value="立即注册" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--内容开始-->
<div class="list_control_bar layui-container">
  <div>
    <div class="list_title layui-pull-left"><span>全部房源</span></div>
    <div class="list_more">
      <ul class="layui-pull-right list-item">
        <li class="click-this"><a href="#">默认排序</a></li>
        <li><a href="#">价格升序</a></li>
        <li><a href="#">价格降序</a></li>
      </ul>
    </div>
  </div>
</div>

<section class="layui-container">
  <hr>
  <h2>共找到<span style="color: #ffc601; margin: 0 5px;">10</span>套出租房源</h2>
  <div class="house-detail">
    <ul>
      <li>
        <a href="housedetails.html" class="show-image">
          <img src="static/img/banner1.jpg" width="240px" height="180px">
        </a>
        <div class="show-details">
          <p class="house-title">
            <a href="#">精装三居室，环境优美</a>
          </p>
          <p class="house-about">
            <span class="layui-icon layui-icon-home"></span>
            <span>三室一厅</span>
            <span class="flag-line">|</span>
            <span>120 m<sup>2</sup></span>
            <span class="flag-line">|</span>
            <span>普通装修</span>
            <span class="flag-line">|</span>
            <span>5/10层</span>
            <span class="flag-line">|</span>
            <span>住宅</span>
          </p>
          <p class="house-address clearfix">
            <span class="layui-icon layui-icon-location"></span>
            <span class="whole-line">
                            <span>北京市海淀区中关村</span>
                        </span>
          </p>
          <div class="show-price">
            <span class="sale-price">8000</span>
            <span class="sale-unit">元/月</span>
          </div>
        </div>
      </li>
      <!-- Add more house listings here -->
    </ul>
  </div>
</section>

<script>
  layui.use(['element', 'carousel', 'layer', 'form'], function () {
    var element = layui.element,
            carousel = layui.carousel,
            $ = layui.jquery,
            layer = layui.layer,
            form = layui.form;

    var layer_index;
    carousel.render({
      elem: "#bg-item",
      width: "100%",
      height: "600px",
      anim: "fade"
    });
    $('.operation').click(function () {
      layer_index = layer.open({
        type: 1,
        content: $('#sign'),
        area: ['420px', '465px'],
        title: "登录/注册界面",
        closeBtn:1
      });
    });
    $('.list-item li').click(function () {
      $('.list-item li').removeClass('click-this');
      $(this).addClass('click-this');
    });

    $('.regist-btn').click(function () {
      if ($("input[name='username']").val() != "" && $("input[name='password']").val() != "" && $("input[name='nickname']").val() != "" && $("input[name='sex']").val() != "" && $("input[name='phone']").val() != "") {
      $.post("/house/user/front/register", $('.form').serialize(), function (res) {
          console.log(res)
          if (res.code==0) {
            layer.close(layer_index);
            layer.alert("注册成功", { icon: 1, time: 2000 });
            $('.form')[0].reset();
          } else {
            layer.msg("注册失败,用户名已存在");
          }
        })
      } else {
        layer.msg("请填写所有信息");
      }
    });

    form.on("submit(login)", function (data) {
      let formDate =data.field
      if (formDate.role == 1){
        $.post("/house/admin/front/login", formDate, function (res) {
          if (res.code==0) {
            let {username} = res.data
            sessionStorage.setItem("adminName",username)
            layer.msg(res.message,{icon:1},function () {
              window.location.href = "http://localhost:8080/house/admin/index.html";
            })
          } else {
            layer.msg(res.message,{icon:2});
          }
        });
      }else if (formDate.role == 2){
        $.post("/house/user/front/login", formDate, function (res) {
          if (res.code==0) {
            let {username} = res.data
            sessionStorage.setItem("username",username)
            layer.msg(res.message,{icon:1},function () {
              window.location.href = "http://localhost:8080/house/frontUser/index.html";
            })
          } else {
            layer.msg(res.message,{icon:2});
          }
        });
      }
      return false;
    });
  });
</script>
</body>
</html>
